<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>库存列表App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <style type="text/css">
        .tableHead {
            border-top: hidden;
        }


        .searchBox {
            display: flex;
            height: 40px;
            position: fixed;
            top: 70px;
            width: 100%;
            padding: 5px 0;
            background: #fff;
        }
        a{
            text-decoration: none;
        }
        .zhuangtai{
            display: inline-block;
            height:30px;
            width: 110px;
            margin-left:5px;
            line-height:30px;
            padding-left:6px;
            border: 1px solid rgb(203, 203, 205);
            background-color: white;
        }
        .w1{
            width: 115px;
        }
        .w2{
            width: 55px;
            text-align: left;
            padding-left: 4px
        }
        /*th{
            color: #228bee;!important;
        }*/
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部一级标签新机，旧机，旧车，旧房 -->
    <div class="oa-tab">
        <div class="oa-tab-left"></div>
        <div class="oa-tab-middle">
            <span :class="selectIndex==0? 'tabActive':'tabNo'" @click="f1=0;changeIndex(0,-1);"
                  style="width: 25%">新机</span>
            <span :class="selectIndex==1? 'tabActive':'tabNo'" @click="f1=0;changeIndex(1,-1);"
                  style="width: 25%">旧机</span>
            <span :class="selectIndex==2? 'tabActive':'tabNo'" @click="f1=0;changeIndex(2,-1);"
                  style="width: 25%">旧车</span>
            <span :class="selectIndex==3? 'tabActive':'tabNo'" @click="f1=0;changeIndex(3,-1);"
                  style="width: 25%">旧房</span>
        </div>
        <div class="oa-tab-right"></div>
    </div>

    <!-- 顶部二级标签公司 -->
    <div class="oa-tab-small" style="line-height: 0px;" v-if="companyList.length>1" v-model="searchParams.companyName">
        <div :class="selectCompany==0? 'tabActive':'tabNo'"  @click="f1=0;searchParams.requestPage=1;chengeCompanyIndex(0,'')" >
            全&nbsp;&nbsp;部
        </div>
        <div style="padding-right: 5px;" :class="selectCompany==i+1? 'tabActive':'tabNo'" v-for="(item,i) in companyList"
             @click="f1=0;searchParams.requestPage=1;chengeCompanyIndex(i+1,item.companyName)">
            {{item.companyName}}
        </div>
    </div>
    <div class="searchBox">
        <select v-if="selectIndex==0" v-model="selectState"  class="zhuangtai">
            <option selected value="状态">状态</option>
            <option v-for="option in stateListNew" v-bind:value="option.value">{{option.name}}</option>
        </select>
        <select v-if="selectIndex==1" v-model="selectState"  class="zhuangtai">
            <option selected value="状态">状态</option>
            <option v-for="option in stateListOld" v-bind:value="option.value">{{option.name}}</option>
        </select>
        <select v-if="selectIndex==2" v-model="selectState" class="zhuangtai">
            <option selected value="状态">状态</option>
            <option v-for="option in stateListCar" v-bind:value="option.value">{{option.name}}</option>
        </select>
        <select v-if="selectIndex==3" v-model="selectState"  class="zhuangtai">
            <option selected value="状态">状态</option>
            <option v-for="option in stateListHouse" v-bind:value="option.value">{{option.name}}</option>
        </select>
        <input type="text" placeholder="关键字" v-model="searchParams.key"
               style="height:30px;width: 184px;display: inline-block; outline: none;padding-left:5px;margin-left: 6px;border: 1px solid rgb(203, 203, 205);">
        <button type="button" class="btn btn-blue" @click="f1=0;searchParams.requestPage=1;changeIndex(selectIndex,0,true);"
                style="margin-left: 5px;float: left;margin-right: 5px;">查询
        </button>
    </div>

    <!--新机-->
    <template v-if="selectIndex==0">
        <table class="oa-table " style="position: fixed;top:110px;">
            <thead>
            <tr class="oa-table-title">
                <th v-if="selectCompany==0" style="width:60px;">购车公司</th>
                <th :class="selectCompany==0? 'w2':'w1'">型号</th>
                <th>序列号</th>
                <th style="width:55px">库存状态</th>
                <th style="width:55px">审核状态</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table tableHead" style="margin-top:134px;">
            <tbody>
            <tr class="oa-lineOne-H" v-for="(item,i) in newMachines">
                <td v-if="selectCompany==0" style="width:60px;text-align: left;padding-left: 4px" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.companyName}}
                </td>
                <td :class="selectCompany==0? 'w2':'w1'" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.modelName}}</td>
                <td class="oa-lineOne" style="text-align: left;"><a class="oaColor" href="javascript:void(0);" @click="goDetail(item.id,'look');">{{item.sequence}}</a>
                </td>
                <td style="width:55px;" class="oa-lineOne">{{item.state}}</td>
                <td style="width:55px;" class="oa-lineOne" @click.stop="showMore($event.target)">
                    <template v-if="item.auditFlag==0" >待-{{item.auditName}}-审核</template>
                    <template v-else-if="item.auditFlag==-1">-</template>
                    <template v-else-if="item.auditFlag==1">已通过</template>
                    <template v-else>已驳回</template>
                </td>
            </tr>
            <tr v-if="(!newMachines ||newMachines.length<=0)&&f1==1">
                <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none">
                    暂无新机信息
                </td>
            </tr>
            </tbody>
        </table>
    </template>
    <!--旧机-->
    <template v-else-if="selectIndex==1">
        <table class="oa-table " style="position: fixed;top:110px;">
            <thead>
            <tr  class="oa-table-title">
                <th v-if="selectCompany==0" style="width:60px;">购车公司</th>
                <th :class="selectCompany==0? 'w2':'w1'">型号</th>
                <th>序列号</th>
                <th style="width:55px">库存状态</th>
                <th style="width:55px">审核状态</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table tableHead" style="margin-top:134px;">
            <tbody>
            <tr class="oa-lineOne-H" v-for="(item,i) in newMachines">
                <td v-if="selectCompany==0" style="width:60px;text-align: left;padding-left: 4px" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.companyName}}
                </td>
                <td :class="selectCompany==0? 'w2':'w1'" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.modelName}}</td>
                <td class="oa-lineOne" style="text-align: left;"><a class="oaColor" href="javascript:void(0);" @click="goDetail(item.id,'look');">{{item.sequence}}</a>
                </td>
                <td style="width:55px" class="oa-lineOne" >{{item.state}}</td>
                <td style="width:55px;" class="oa-lineOne" @click.stop="showMore($event.target)">
                    <template v-if="item.auditFlag==0" >待-{{item.auditName}}-审核</template>
                    <template v-else-if="item.auditFlag==-1">-</template>
                    <template v-else-if="item.auditFlag==1">已通过</template>
                    <template v-else>已驳回</template>
                </td>
            </tr>
            <tr v-if="(!newMachines ||newMachines.length<=0)&&f1==1">
                <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none">
                    暂无旧机信息
                </td>
            </tr>
            </tbody>
        </table>
    </template>
    <!--旧车-->
    <template v-else-if="selectIndex==2">
        <table class="oa-table " style="position: fixed;top:110px;">
            <thead>
            <tr  class="oa-table-title">
                <th v-if="selectCompany==0" style="width:60px;">购车公司</th>
                <th :class="selectCompany==0? 'w2':'w1'">型号</th>
                <th>序列号</th>
                <th style="width:55px">库存状态</th>
                <th style="width:55px">审核状态</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table tableHead" style="margin-top:134px;">
            <tbody>
            <tr class="oa-lineOne-H" v-for="(item,i) in newMachines">
                <td v-if="selectCompany==0" style="width:60px;text-align: left;padding-left: 4px" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.companyName}}
                </td>
                <td :class="selectCompany==0? 'w2':'w1'" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.modelName}}</td>
                <td class="oa-lineOne" style="text-align: left;"><a class="oaColor" href="javascript:void(0);" @click="goDetail(item.id,'look');">{{item.sequence}}</a>
                </td>
                <td style="width:55px" class="oa-lineOne" >{{item.state}}</td>
                <td style="width:55px;" class="oa-lineOne" @click.stop="showMore($event.target)">
                    <template v-if="item.auditFlag==0" >待-{{item.auditName}}-审核</template>
                    <template v-else-if="item.auditFlag==-1">-</template>
                    <template v-else-if="item.auditFlag==1">已通过</template>
                    <template v-else>已驳回</template>
                </td>
            </tr>
            <tr v-if="(!newMachines ||newMachines.length<=0)&&f1==1">
                <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none">
                    暂无旧车信息
                </td>
            </tr>
            </tbody>
        </table>
    </template>
    <!--旧房-->
    <template v-else>
        <table class="oa-table " style="position: fixed;top:110px;">
            <thead>
            <tr  class="oa-table-title">
                <th v-if="selectCompany==0" style="width:60px;">归属公司</th>
                <th :class="selectCompany==0? 'w2':'w1'">所在地</th>
                <th>房屋名称</th>
                <th style="width:55px">是否过户</th>
                <th style="width:55px">审核状态</th>
            </tr>
            </thead>
        </table>
        <table class="oa-table tableHead" style="margin-top:134px;">
            <tbody>
            <tr class="oa-lineOne-H" v-for="(item,i) in newMachines">
                <td v-if="selectCompany==0" style="width:60px;text-align: left;padding-left: 4px" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.companyName}}
                </td>
                <td :class="selectCompany==0? 'w2':'w1'" class="oa-lineOne " @click.stop="showMore($event.target)">{{item.storeAddress}}</td>
                <td class="oa-lineOne" style="text-align: left;"><a class="oaColor" href="javascript:void(0);" @click="goDetail(item.id,'look');">{{item.houseName}}</a>
                </td>
                <td style="width:55px" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.transfer}}</td>
                <td style="width:55px;" class="oa-lineOne"  @click.stop="showMore($event.target)">
                    <template v-if="item.auditFlag==0">待-{{item.auditName}}-审核</template>
                    <template v-else-if="item.auditFlag==-1">-</template>
                    <template v-else-if="item.auditFlag==1">已通过</template>
                    <template v-else>已驳回</template>
                </td>
            </tr>

            <tr v-if="(!newMachines ||newMachines.length<=0)&&f1==1">
                <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none">
                    暂无旧房信息
                </td>
            </tr>
            </tbody>
        </table>
    </template>
</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            isBottomLine:false,
            isLoad: false,
            selectIndex: 0,
            selectCompany:0,
            newMachines: [],
            searchParams: {
                auditFlag: 1,
                haveDelivery: 1,
                haveSettle: 0,
                userId: getUrlParamObj().userId,
                customerKeyId: '',
                createUserId: '',
                customerKey: '',
                createUserName: '',
                key: "",
                requestPage: 1,
                pageSize: 40,
                type: '',
                state: ''
            },
            companyList:{},
            stateListNew: [
                {name: '全部', value: '全部'},
                {name: '未发订单', value: '未发订单'},
                {name: '提车在途', value: '提车在途'},
                {name: '库存', value: '库存'},
                {name: '交付在途', value: '交付在途'},
                {name: '已交', value: '已交'},
                {name: '移库在途', value: '移库在途'},
                {name: '退货在途', value: '退货在途'},
                {name: '已退货', value: '已退货'},
            ],
            stateListOld:[
                {name: '全部', value: '全部'},
                {name: '提车在途', value: '提车在途'},
                {name: '库存', value: '库存'},
                {name: '交付在途', value: '交付在途'},
                {name: '已交', value: '已交'},
                {name: '移库在途', value: '移库在途'},
                {name: '退货在途', value: '退货在途'},
                {name: '已退货', value: '已退货'},
            ],
            stateListCar:[
                {name: '全部', value: '全部'},
                {name: '提车在途', value: '提车在途'},
                {name: '库存', value: '库存'},
                {name: '交付在途', value: '交付在途'},
                {name: '已交', value: '已交'},
                {name: '移库在途', value: '移库在途'},
                {name: '退货在途', value: '退货在途'},
                {name: '已退货', value: '已退货'},
            ],
            stateListHouse: [
                {name: '全部', value: '全部'},
                {name: '已售', value: '已售'},
                {name: '未售', value: '未售'},
            ],
            selectState: "状态",
            f1:0,
            pageCount:''
        },
        methods: {
                chengeCompanyIndex:function (index,companyName) {
                document.documentElement.scrollTop=document.body.scrollTop=0;
                var that = this;
                that.selectCompany=index;
                that.searchParams.companyName=companyName;
                that.searchParams.requestPage=1;
                that.isBottomLine=false;
                that.isLoad=false;
                that.getList(false);
            },
            changeIndex:function (index,flag,isSearch) {
                document.documentElement.scrollTop=document.body.scrollTop=0;
                var that = this;
                that.newMachines=[];
                that.selectIndex=index;
                that.searchParams.key=isSearch?that.searchParams.key:'';
                if (flag==-1){
                    that.searchParams.state='';
                    that.selectState='全部';
                    that.searchParams.companyName='';
                    that.selectCompany=0;
                }else {
                    that.searchParams.state=that.selectState == '全部' ? '' : that.selectState;
                    that.searchParams.companyName=that.searchParams.companyName;
                }
                that.searchParams.requestPage=1;
                that.isBottomLine=false;
                that.isLoad=false;
                that.getList(false);
            },
            setPullRefresh: function (isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if (mydiv.offsetParent === null) {
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                    } else {
                        mydiv.style.display = 'none';
                    }

                } else {
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            fjStyle: function (fjName) {
                //传入附件名称 返回对应附件类型的样式用于展示
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            getList: function (pushFlag,companyName) {
                var that = this;
                console.log(that.searchParams.requestPage)
                if(that.isBottomLine){
                   /* debugger*/
                    /*JSBridge.call(UI, 'showToast', "当前为最后一页")*/
                    return;
                }
                if (that.isLoad) {
                    return;
                } else {
                    that.isLoad = true;
                }
                var url = '';
                if (that.selectIndex == 0) {
                    url = '/deviceSampleNew/getDeviceSampleList.json';
                } else if (that.selectIndex == 1) {
                    that.searchParams.type = that.selectIndex;
                    url = '/deviceDisplace/getDisplaceListNew.json';
                } else if (that.selectIndex == 2) {
                    that.searchParams.type = that.selectIndex;
                    url = '/deviceDisplace/getDisplaceListNew.json';
                } else if (that.selectIndex == 3) {
                    that.searchParams.type = that.selectIndex;
                    url = '/deviceDisplace/getDisplaceListNew.json';
                }
                that.showLoading();
                axios({
                    url: url,
                    method: 'post',
                    data: that.searchParams,
                }).then(function (response) {
                    that.f1=1;
                    console.log(response)
                    if (pushFlag && that.selectIndex==0) {
                        that.newMachines = that.newMachines.concat(response.records);
                    } else {
                        that.newMachines = response.records;
                    }
                    that.searchParams.requestPage = that.searchParams.requestPage + 1;
                    that.pageCount=response.pager.pageCount;

                    if(that.searchParams.requestPage>response.pager.pageCount){
                        that.isBottomLine = true;
                    }
                    console.log(that.searchParams.requestPage+that.isBottomLine)
                    that.isLoad = false;
                    that.hideLoading();
                }).catch(function (error) {
                    that.isLoad = false;
                    that.hideLoading();
                })

            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)

                setTimeout(function () {
                    that.hideLoading()
                }, 3000)
            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },
            goDetail: function (id, type) {
                var that = this;
                var url = '';
                var title ='';
                if (that.selectIndex == 0) {
                    title='新机详情';
                    url = '/page/device-new/sample/newMachineDetailApp.html';
                } else if (that.selectIndex == 1) {
                    title='旧机详情';
                    that.searchParams.type = that.selectIndex;
                    url = '/page/device-new/sample/oldMachineDetailApp.html';
                } else if (that.selectIndex == 2) {
                    title='旧车详情';
                    that.searchParams.type = that.selectIndex;
                    url = '/page/device-new/sample/oldCarDetailApp.html';
                } else if (that.selectIndex == 3) {
                    title='旧房详情';
                    that.searchParams.type = that.selectIndex;
                    url = '/page/device-new/sample/oldHouseDetailApp.html';
                }

                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    /* title: title,         //顶部标题*/
                    url:  url + '?id=' + id + "&pageType=" + type + "&userId=" + getUrlParamObj().userId,
                    /* showTitleBar: true,     //是否显示标题栏*/
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
        },
        mounted: function () {
            var that = this;
            that.getList(false);
            /* that.searchParams.userId*/
            axios.post(urlConfig.main.getCompanyListByUserId, {userId:'201711271733404C9DA1461F2421F828'})
                .then(function (r) {
                    that.companyList = r;
                    console.log(that.companyList)
                })
            that. setPullRefresh(true);
        }
    });
    window.onscroll = function () {
        var isTop = true
        /*清除，提示框信息*/
        var mydiv = document.getElementById("oa-more");
        if(mydiv!=null){
            mydiv.style.display = 'none';
        }
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        var sum = Math.ceil(scrollTop + windowHeight)
        if (sum >= scrollHeight) {
            //写后台加载数据的函数
            app.getList(true);
            console.log("滚动到底部了");
            if(app.isBottomLine){
                var param = {
                    title: "没有更多数据了..."
                }
                JSBridge.call(UI, 'showToast',param );
            }

        }
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        if (scrollTop === 0) {
            isTop = true
            setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            setScrollTop(false) //非顶部
        }
    }
</script>
<script>

    function setScrollTop (isScrollTop) {
        var param = {
            isScrollTop: isScrollTop
        }
         JSBridge.call(UI, 'setScrollTop', param)
    }

</script>
</body>
</html>